<template>
  <div>
    <svg-icon
      :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="handleToggle"
      id="guide-full"
    />
  </div>
</template>

<script setup lang="ts">
import screenfull from "screenfull";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { ref, onMounted, onUnmounted } from "vue";

const handleToggle = () => {
  screenfull.toggle();
};

const isFullScreen = ref<boolean>(false);

const onChange = () => {
  isFullScreen.value = screenfull.isFullscreen;
};

onMounted(() => {
  screenfull.on("change", onChange);
});

onUnmounted(() => {
  screenfull.off("change", onChange);
});
</script>

<style lang="scss" scoped></style>
